<template>
  <div class="address">
    <div v-if="key == 1">
      <TopBar title="收货地址" @leftClick="router.push(id ? 'orderdetail' : 'me')" />
      <van-address-list :list="list" default-tag-text="默认" @add="onAdd" @edit="onEdit" v-model="chosenAddressId"
        @select="onSelect" :class="id ? 'list' : 'list f'" />
      <div v-if="!list.length" class="empty">
        <span>还没有收货地址，快去新增一个吧...</span>
      </div>
    </div>
    <div v-else class="wrap">
      <TopBar :title="title" @leftClick="key = 1; addressInfo = {}" />
      <van-address-edit :area-list="areaList" :show-delete="key == 3 ? true : false" show-set-default
        :address-info="addressInfo" show-search-result :area-columns-placeholder="['请选择', '请选择', '请选择']" @save="onSave"
        @delete="onDelete" @change-default="changeDefault" />
    </div>
  </div>
</template>
<script setup>
import { useRouter, useRoute } from 'vue-router';
import { ref, onMounted } from 'vue';
import TopBar from "@/components/topHeader/index.vue"
import { showConfirmDialog, showSuccessToast } from 'vant';
import { areaList } from '@vant/area-data';
import { addAddress, delAddress, modifyAddress, getAddress } from "@/api"

const router = useRouter()
const route = useRoute()
const title = ref("新增收货地址")
const addressInfo = ref({})
const key = ref(1) //1:列表 2:新增 3:修改
const list = ref([
  // {
  //   id: "1",
  //   name: "aa",
  //   tel: "18275341743",
  //   province: "贵州省",
  //   city: "贵阳市",
  //   county: "开阳县",
  //   areaCode: "520121",
  //   addressDetail: "云开广场1栋一单元302",
  //   address: "贵州省贵阳市开阳县云开广场1栋一单元302",
  //   isDefault: true,
  // },
])
const id = ref(0) // 0:从我的页面进入，1:从订单详情进入
const chosenAddressId = ref(2);

onMounted(() => {
  if (route?.query?.isDetail) {
    chosenAddressId.value = route?.query?.id
    id.value = 1
  } else {
    id.value = 0
  }
  getList()
})
const onSelect = (v) => {
  console.log(v);
  if (id.value) {
    router.push({
      name: "orderdetail",
      query: v
    })
  }
}
const onAdd = () => {
  key.value = 2;
  title.value = "新增收货地址"
}
const onEdit = (item, index) => {
  key.value = 3;
  title.value = "编辑收货地址"
  addressInfo.value = item
};
// 查询地址
const getList = async () => {
  const { data, code } = await getAddress({
    page: 1,
    size: 100,
  })
  if (code == 200) {
    list.value = data.map(item => {
      item.id = item._id
      item.address = item.province + item.city + item.county + item.addressDetail
      return item
    })
  }
}
// 新增、修改地址
const onSave = async (v) => {
  console.log(v);
  if (!v._id) {
    const { code } = await addAddress(v)
    if (code == 200) {
      showSuccessToast("新增成功")
    }
  } else {
    const { code } = await modifyAddress(v)
    if (code == 200) {
      showSuccessToast("修改成功")
      addressInfo.value = {}
    }
  }
  key.value = 1
  getList()
};
// 删除地址
const onDelete = (v) => {
  console.log(v);
  showConfirmDialog({
    title: '确定删除？',
  }).then(async () => {
    const { code } = await delAddress({ id: v._id })
    if (code == 200) {
      showSuccessToast("删除成功")
      addressInfo.value = {}
      key.value = 1
      getList()
    }
  })
};

</script>
<style lang="less" scoped>
.address {
  padding-top: 45px;

  .list {
    overflow: auto;
    // height: calc(100vh - 45px);
  }

  .empty {
    height: 300px;
    display: flex;
    align-items: center;

    span {
      flex: 1;
      text-align: center;
    }
  }

  /deep/.f .van-radio__icon {
    display: none;
  }

  /deep/.van-address-list__bottom {
    bottom: 10px;
  }
}
</style>
